import React from 'react';
import {
  ProForm,
  ProFormText,
  ProFormSelect,
  ProFormDigit,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProCard,
  ProFormList,
  ProFormDependency,
} from '@ant-design/pro-components';
import { Modal } from 'antd';
import dayjs from 'dayjs';
import { DeleteOutlined, SmileFilled } from '@ant-design/icons';


const ContractForm = ({ visible, onCancel, onFinish, initialValues, title }) => {
  // 默认模拟数据
  const defaultValues = {
    customerName: '北京科技有限公司',
    contractTerm: 12,
    contractStartMonth: dayjs(),
    defaultPaymentMethod: 'bank',
    customerRating: 'A',
    paymentMethods: [
      {
        paymentPeriod: 1,
        settlementType: '月结',
        firstPaymentDate: dayjs(),
        serviceItems: '代理记账服务',
        contractItems: [
          {
            monthlyFee: '3000',
            servicePeriod: [dayjs(), dayjs().add(11, 'month')]
          }
        ]
      }
    ]
  };

  // 合并默认值和传入的初始值
  const mergedInitialValues = {
    ...defaultValues,
    ...initialValues,
  };

  return (
    <Modal
      title={title}
      open={visible}
      footer={null}
      onCancel={onCancel}
      width={800}
      destroyOnClose
    >
      <ProForm
        initialValues={mergedInitialValues}
        onFinish={onFinish}
        submitter={{
          resetButtonProps: {
            style: { display: 'none' },
          },
          submitButtonProps: {
            children: '确定',
          },
        }}
        grid={true}
        colProps={{
          span: 24,
        }}
      >

        <ProFormSelect
          name="customerName"
          label="客户名称"
          options={[
            { label: '北京科技有限公司', value: '北京科技有限公司' },
            { label: '上海贸易有限公司', value: '上海贸易有限公司' },
            { label: '深圳创新科技', value: '深圳创新科技' },
            { label: '广州制造有限公司', value: '广州制造有限公司' },
            { label: '杭州电商科技', value: '杭州电商科技' },
            { label: '北京教育科技', value: '北京教育科技' },
          ]}
          rules={[{ required: true, message: '请选择客户名称' }]}
          placeholder="请选择客户名称"
        />



        <ProFormDigit
          name="contractTerm"
          label="合同期限（月）"
          min={1}
          fieldProps={{ addonAfter: '月' }}
          rules={[{ required: true, message: '请输入合同期限' }]}
          placeholder="请输入合同期限"
          colProps={{
            span: 8,
          }}
        />
        <ProFormDatePicker
          name="contractStartMonth"
          label="合同开始月份"
          picker="month"
          format="YYYY-MM"
          rules={[{ required: true, message: '请选择合同开始月份' }]}
          placeholder="请选择合同开始月份"
          colProps={{
            span: 8,
          }}
          fieldProps={{
            style: {
              width: '100%',
            },
          }}
        />
        <ProFormDependency name={['contractStartMonth', 'contractTerm']}>
          {({ contractStartMonth, contractTerm }) => {
            let endMonth = undefined;
            if (contractStartMonth && contractTerm) {
              endMonth = dayjs(contractStartMonth).add(contractTerm, 'month');
            }
            return (
              <ProFormDatePicker
                name="contractEndMonth"
                label="合同结束月份"
                picker="month"
                format="YYYY-MM"
                disabled
                fieldProps={{
                  value: endMonth,
                  style: {
                    width: '100%',
                  },
                }}
                placeholder="自动计算"
                colProps={{
                  span: 8,
                }}
              />
            );
          }}
        </ProFormDependency>

        <ProFormSelect
          name="defaultPaymentMethod"
          label="默认收款方式"
          options={[
            { label: '银行转账', value: 'bank' },
            { label: '现金', value: 'cash' },
            { label: '支付宝', value: 'alipay' },
            { label: '微信', value: 'wechat' },
          ]}
          rules={[{ required: true, message: '请选择默认收款方式' }]}
          placeholder="请选择默认收款方式"
          colProps={{
            span: 12,
          }}
        />


        {/* 客户评级移动到默认收款方式后面 */}
        <ProFormSelect
          name="customerRating"
          label="客户评级"
          options={[
            { label: 'A+', value: 'A+' },
            { label: 'A', value: 'A' },
            { label: 'B+', value: 'B+' },
            { label: 'B', value: 'B' },
            { label: 'C', value: 'C' },
          ]}
          rules={[{ required: true, message: '请选择客户评级' }]}
          placeholder="请选择客户评级"
          colProps={{
            span: 12,
          }}
        />

        <ProFormList
          name="paymentMethods"
          label={<b style={{ fontSize: '18px' }}>
            <span>合同服务项目</span>
          </b>}
          creatorButtonProps={{
            creatorButtonText: '添加合同服务项目',
          }}
          colProps={{
            span: 24,
          }}
          itemContainerRender={(doms) => {
            return <ProForm.Group colProps={{ span: 24 }}>{doms}</ProForm.Group>;
          }}

          deleteIconProps={{
            icon: <SmileFilled style={{ color: 'red', fontSize: '16px' }} />,
          }}
          itemRender={({ listDom, action }, { record, index }) => {
            return (
              <ProCard
                bordered
                extra={action}
                title={`合同服务项目${index + 1}`}
                style={{
                  marginBlockEnd: 8,
                }}
              >
                {listDom}
              </ProCard>
            );
          }}
        >


          <ProFormDigit
            name="paymentPeriod"
            label="收款周期（期）"
            min={1}
            fieldProps={{ addonAfter: '期' }}
            rules={[{ required: true, message: '请输入收款周期' }]}
            placeholder="请输入收款周期"
          />


          <ProFormSelect
            name="settlementType"
            label="结算方式"
            options={[
              { label: '月结', value: '月结' },
              { label: '季结', value: '季结' },
              { label: '年结', value: '年结' },
            ]}
            rules={[{ required: true, message: '请选择结算方式' }]}
            placeholder="请选择结算方式"
          />

          <ProFormDatePicker
            name="firstPaymentDate"
            label="首次收款日期"
            rules={[{ required: true, message: '请选择首次收款日期' }]}
            placeholder="请选择首次收款日期"
            fieldProps={{
              style: {
                width: '100%',
              },
            }}
          />



          <ProFormText
            name="serviceItems"
            label="服务项目"
            placeholder="请输入服务项目，用逗号分隔"
            rules={[{ required: true, message: '请输入服务项目' }]}
          />




          <ProFormList
            name="contractItems"
            label="合同明细"
            creatorButtonProps={{
              creatorButtonText: '添加合同明细',
            }}
            colProps={{
              span: 24,
            }}
            itemContainerRender={(doms) => {
              return <ProForm.Group colProps={{ span: 24 }}>{doms}</ProForm.Group>;
            }}
            fieldExtraRender={(doms) => {
              return <div style={{ padding: '12px', backgroundColor: '#f0f2f5', marginBottom: '12px' }}>
                合计：<strong>¥{doms.monthlyFee}</strong> 元
              </div>;
            }}
          >
            <ProFormText
              name="monthlyFee"
              label="合同月收费"
              colProps={{
                span: 8,
              }}
              rules={[{ required: true, message: '请输入合同月收费' }]}
              placeholder="请输入月收费金额"
            />
            <ProFormDateRangePicker
              name="servicePeriod"
              label="服务期间"
              rules={[{ required: true, message: '请选择服务期间' }]}
              placeholder={['开始日期', '结束日期']}
              fieldProps={{
                style: {
                  width: '100%',
                },
                picker: 'month',
                format: 'YYYY-MM',
              }}
              colProps={{
                span: 16,
              }}
            />

          </ProFormList>

        </ProFormList>


      </ProForm>
    </Modal>
  );
};

export default ContractForm; 